<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>svg</title>
    <style>
        .container {
            width: 800px;
            height: 400px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <svg class="container">
        <!-- 线段 -->
        <line x1='100' y1='100' x2='300' y2='100' stroke="#000" />
        <line x1='300' y1='100' x2='200' y2='200' style="stroke:#000" />

        <!-- 折线 -->
        <!-- <polyline points="
          50 100
          200 40
          150 120
          400 200
          50 50  
        " fill-opacity='0' stroke='#000' /> -->

        <!-- 矩形 -->
        <rect x="400" y="100" width="100" height="200" fill-opacity="0" stroke="#000" />

        <!-- 圆 -->
        <circle cx="100" cy="100" r="100" fill-opacity="0" stroke="#000" />

        <!-- 椭圆 -->
        <ellipse cx="100" cy="100" rx="100" ry="50" fill-opacity="0" stroke="#000" />

        <!-- 多边形 -->
        <polygon points="
        100 100
        200 200
        250 300
        400 400
      " fill-opacity="0" stroke="#000" />

        <!-- 任意图形 -->
        <path d="
              M 600 300
              L 700 300
              L 625 370
              L 650 260
              L 675 370
              Z
            " fill-opacity="0" stroke="#000" />
    </svg>

    <!-- 小东西 -->
    <svg viewBox="0 0 1024 1024" width="32" height="32">
        <path
            d="M685.374607 0.757094H388.902435c-62.330781 0-113.09595 53.803508-113.703618 120.188729h-98.133375c-64.771414 0-117.459204 57.41963-117.459204 127.998755v647.056667c0 70.579125 52.697752 127.998755 117.459204 127.998755h482.408569c64.741529 0 117.419357-57.369821 117.459204-127.909099l0.249044-49.918418h73.039682c62.689405 0 113.683694-54.421138 113.723542-121.334333l1.52415-442.890235L685.374607 0.757094z m6.415379 96.788537l167.41747 168.09487H742.086951c-27.733562 0-50.296966-26.020138-50.296965-58.007374V97.545631z m21.377953 798.316149v0.159389c0 35.424046-24.087555 64.243441-53.70389 64.24344H177.05548c-29.616336 0-53.70389-28.819394-53.70389-64.24344V248.95454c0-35.424046 24.097516-64.243441 53.70389-64.243441h98.123414v540.077243c0 66.94308 51.014213 121.404064 113.723541 121.404064H713.426945l-0.259006 49.669374z m187.012268-171.073438c0 31.788001-22.413978 57.64875-49.968228 57.64875H388.902435c-27.55425 0-49.968227-25.860749-49.968227-57.64875V122.161159c0-31.788001 22.413978-57.64875 49.968227-57.648751h239.142198v143.110757c0 67.142315 51.16364 121.762688 114.05228 121.762688h159.448056l-1.364762 395.282947v0.119542z"
            fill="#6A6A6A"></path>
        <path
            d="M424.057514 495.448523H816.531242c17.602444 0 31.877657-14.275213 31.877657-31.877657s-14.275213-31.877657-31.877657-31.877657H424.057514c-17.602444 0-31.877657 14.275213-31.877657 31.877657s14.275213 31.877657 31.877657 31.877657zM819.868435 613.136848H420.730283c-17.602444 0-31.877657 14.275213-31.877657 31.877657s14.275213 31.877657 31.877657 31.877657h399.138152c17.602444 0 31.877657-14.275213 31.877657-31.877657s-14.275213-31.877657-31.877657-31.877657z"
            fill="#6A6A6A"></path>
    </svg>
</body>

</html>